<template>
  <el-dialog :title="isEdit?'编辑仓库策划类型':'新增仓库策划类型'"
             :visible.sync="dialogForm"
             width="720px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="仓库策划类型"
                        prop="stackPlanType">
            <el-select v-model="form.stackPlanType"
                       placeholder="请选择">
              <el-option v-for="item in planTypeList"
                         :key="item.code"
                         :label="item.desc"
                         :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属单位"
                        prop="orgId">
            <auto-search-org v-model="form.orgId"
                             @select="v=>{form.orgId=v;form.deptId='';form.deptName=''}"
                             @selectName="v=>form.orgName=v"
                             :disabled="true"
                             :name="form.orgName"></auto-search-org>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属仓库"
                        prop="warehouseId">
            <el-select v-model="form.warehouseId"
                       placeholder="请选择">
              <el-option v-for="item in warehouseList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="form.factors"
                    border
                    stripe
                    max-height="550">
            <el-table-column label="序号"
                             min-width="50">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column prop="attrCode"
                             label="原则"
                             
                             min-width="100">
              <template slot-scope="scope">
                <select-principle v-model="scope.row.attrCode"
                                  @selectName="v=>scope.row.attrName=v"
                                  :name="scope.row.attrName"></select-principle>
              </template>
            </el-table-column>
            </el-table-column>
            <el-table-column prop="priority"
                             label="优先级"
                             min-width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.priority"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictPriority"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="remark"
                             label="备注"
                             min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark"></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right"
                             align="center"
                             label="操作"
                             
                             width="180">
              <template slot-scope="scope">
                <el-button size="small"
                           type="text"
                           @click="handleAddTable(scope.row)">复制</el-button>
                <el-button :disabled="form.factors.length===1"
                           type="text"
                           class="danger"
                           size="small"
                           @click="handleRemove(scope.$index)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addStorehousePlanType,
  updateStorehousePlanType,
  getPrincipleList,
  getPlanTypeList
} from '@/api/storehousePlanType/storehousePlanType'
import { getWarehouseList } from '@/api/adminWarehouse/adminWarehouse' //所属仓库来源于管辖仓库
import selectPrinciple from '@/components/select/selectPrinciple' //选择框
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import { maxLength, sortLength } from '@/utils/rules'
import { PUBLIC_LIMIT, REG_ALL_NUMBER, PUBLIC_NUMBER_NULL } from '@/utils/Reg'
export default {
  name: 'storehousePlanTypeAddForm',
  components: {
    autoSearchOrg,
    selectPrinciple
  },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        stackPlanTypeDesc: [
          { required: true, validator: PUBLIC_LIMIT, trigger: 'blur' },
          sortLength
        ],
        // orgId: [
        //   { required: true, validator: PUBLIC_LIMIT, trigger: 'blur' },
        //   sortLength
        // ],
        warehouseName: [
          { required: true, message: '请选择所属仓库', trigger: 'blur' }
        ],
        attrCode: [{ required: true, message: '请选择所属仓库', trigger: 'blur' }],
        priority: [{ validator: PUBLIC_LIMIT, trigger: 'blur' }],
        remark: [maxLength]
      },
      dialogForm: false,
      isEdit: false,
      warehouseList: null,
      principleList: null,
      planTypeList: null
    }
  },
  mounted() {
    getWarehouseList().then(res => {
      this.warehouseList = res.data.aaData
    }),
    getPrincipleList({ search_EQ_orgId: this.form.orgId }).then(res => {
        this.principleList = res.data.aaData
    }),
    getPlanTypeList().then(res => {
        this.planTypeList = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        stackPlanType: '',
        stackPlanTypeDesc: '',
        warehouseId: '',
        warehouseName: '',
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        factors: [
          { sortNo: 1, attrCode: '', attrName: '', priority: '', remark: '' }
        ]
      }
    },
    handleAddTable(item) {
      let params = { ...item }
      params.sortNo = this.form.factors.length + 1
      this.form.factors.push(params)
    },
    handleRemove(index) {
      if (this.form.factors.length === 1) {
        this.$message({ message: '至少需要一条数据!', type: 'error' })
      } else {
        this.form.factors.splice(index, 1)
      }
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addStorehousePlanType(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    // 编辑
    handleToEdit() {
      updateStorehousePlanType(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    handleCllx(v) {
      if (v === 'JOB_CLLX_HC') {
        this.form.teu = 0
      }
      this.form.typeCode = v
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style scoped>
</style>
